<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>云南公安网安大数据安全监管平台</title>
  <link rel="stylesheet" href="../../assets/css/uikit.css">
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="../../assets/icons/style.css">
  <script src="../../scripts/jquery-1.11.3.min.js"></script>
  <script src="nav.js"></script>
  <script src="../../scripts/plugins/jquery.icheck.min.js"></script>
  <script src="../../scripts/plugins/jquery.tablesort.min.js"></script>
  <script src="../../scripts/plugins/jquery.ztree.all.min.js"></script>
  <script src="../../scripts/plugins/jquery.mCustomScrollbar.concat.min.js"></script>
  <script src="../../scripts/plugins/select2.min.js"></script>
  <script src="../../scripts/lib/echarts-3.7.1/echarts.min.js"></script>
</head>
<body class="sys-body" style="overflow:hidden;">
  <div class="sys-header">
    <div class="sys-logo">
      <h1>云南公安网安大数据安全监管平台</h1>
    </div>

    <div class="sys-menu" id="sys-menu">
      <ul>
        <li>loading......</li>
      </ul>
      <div class="curLine"></div>
    </div>
    <div class="sys-topbar">
      <img src="../../assets/images/_userphoto.png"><span><a href="javascript:void(0);">Admin</a><a href="javascript:void(0);"> 【注销】</a></span>
    </div>
  </div>

  <div class="sys-sidebar">
    <div class="toggle-sidebar"><i class="icon-toleft"></i></div>
    <ul>
      <li><a href="data-resource.html"><i class="icon-explore"></i><span>资源状态概览</span></a><em class="open"></em>
        <ul>
          <li><a href="data-resource.html">资源概览</a></li>
        </ul>
      </li>

      <li> <a href="data-traffic.html"><i class="icon-db-search"></i><span>流量分析</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-traffic.html">数据库流量</a></li>
          <li> <a href="data-traffic-ftp.html">FTP流量</a></li>
        </ul>
      </li>

      <li> <a href="data-flow.html"><i class="icon-db-search"></i><span>流向分析</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-flow.html">流向分析</a></li>
          <li><a  href="data-client.html">客户端管理</a></li>
          <li><a href="data-threshold.html">风险阀值配置</a></li>
        </ul>
      </li>

      <li class="active"> <a href="data-laws.html"><i class="icon-db-search"></i><span>使用规律分析</span></a><em class="open"></em>
        <ul>
          <li><a href="data-overview.html">概况</a></li>
          <li> <a href="data-laws.html">资源使用规律</a></li>
          <li class="active"><a href="data-userlaw.html">用户行为规律</a></li>
        </ul>
      </li>

      <li> <a href="data-riskevent..html"><i class="icon-db-search"></i><span>风险事件</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-riskevent-charts.html">风险概况</a></li>
          <li> <a href="data-riskevent.html">事件查看</a></li>

        </ul>
      </li>

      <li> <a href="data-resourceconfig.html"><i class="icon-notifications-on"></i><span>数据资源管理</span></a><em class="open"></em>
        <ul>
          <li><a href="data-resourceconfig.html">数据资源配置</a></li>
          <li><a href="data-ipconfig.html">参数配置</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="sys-main" id="sys-main">
    <div class="sys-title">
      <h2>用户行为规律</h2>
      <div class="fm-group">
        <select id="selecttype">
          <option value="1">集群</option>
          <option value="2">IP</option>
        </select>
        <input type="text" id="keyword" placeholder="请选择要分析的集群">
        <ul class="fm-group-list">
          <li class="active">3G电信FTP集群</li>
          <li>3G联通FTP集群</li>
          <li>未知终端</li>
          <li>门户网站</li>
          <li>数据资源共享目录</li>
        </ul>
      </div>

      <input type="text" placeholder="2017-08-21 ~ 2017-09-22" title="统计周期"> <button class="btn">分析</button>
<!--       <div class="alink"><a href="javascript:void(0);" onclick="javascript:history.go(-1)"><i class="icon-reply"></i>返回</a></div> -->
    </div>

    <div class="sys-content">
      <div class="col-left">
        <div class="panel" style="min-height:720px;">
          <div class="panel-body">
            <div class="row">
              <div id="chart5" class="chart col-12">loading...</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-right" style="padding-left:20px;">
        <div class="panel" style="min-height:720px;">
          <div class="panel-body">
            <div class="row">
              <div id="chart1" class="chart col-4">loading...</div>
              <div id="chart2" class="chart col-4">loading...</div>
              <div id="chart3" class="chart col-4">loading...</div>
            </div>
            <div class="row">
              <div id="chart4" class="chart">loading...</div>
            </div>


          </div>
        </div>
      </div>
    </div>
  </div>


</body>
</html>
<script>

  (function($){
    $(window).load(function(){
      $(".dialog-body").mCustomScrollbar({
        autoHideScrollbar:true,
        advanced:{
          autoExpandHorizontalScroll:true
        }
      });
    });
  })(jQuery);

  $(document).ready(function(){
    showCharts(0);

    $(".nav-tabs").on("click", "a", function() {
     $(this).parents().siblings().removeClass('active').end().addClass('active');
     $(".tabs-con").hide().eq($(this).parents().index()).show();
     showCharts($(this).parents().index());
   })


// $(".col-left .table thead tr th:gt(2),.col-left .table tbody > tr > td:gt(2)").hide();
$(".col-left .table").find("tr").each(function() {
  $(this).children("th:gt(2),td:gt(2)").hide();
})

$("#tablefull").on('click',  function() {
 if($(this).hasClass("open")) {
  $(this).prop("class","");
  $(".col-left .table").find("tr").each(function() {
    $(this).children("th:gt(2),td:gt(2)").hide();
  })
  $(".col-left").stop(true).animate({"width": '20%'},400);
  $(".col-right").stop(true).animate({"width": '80%',"display":"none"},400,function(){ $(".col-right").show();});
}
else{
  $(this).prop("class","open");
  $(".col-left .table").find("tr").each(function() {
    $(this).children("th:gt(2),td:gt(2)").show();
  })
  $(".col-left").stop(true).animate({"width": '100%'},400);
  $(".col-right").hide();stop(true).animate({"width": '0'},400);

}
});


$(".scrollbar").mCustomScrollbar({
  autoHideScrollbar:true,
  advanced:{
    autoExpandHorizontalScroll:true
  }
});

$(".dropdown-menu li:eq(0)").on("click",function(){
  console.log($(this).parents(".open"));
  $(this).parents(".open").removeClass('open');
  $(".dialog").show();
})

$(".dropdown").on("click", "button", function() {
  $(this).parent().hasClass('open') ? $(this).parent().removeClass('open') : $(this).parent().addClass('open');
})


$(".dialog .close,#cancel").on("click",function(){
  $(".dialog").hide();
})

$(".table tr").on("click", "td:eq(2) a", function() {
  $(this).parents("tr").siblings().removeClass('active').end().addClass('active') ;
  $("#info").show()
});

$("#selecttype").on('change', function() {
  $(this).val()=="1" ? $("#keyword").val('').attr("placeholder","请选择要分析的集群").next().show():$("#keyword").val('').attr("placeholder","请输入要分析的客户端IP").next().hide();
});

$(".fm-group-list").on('click',"li", function() {
 $(this).hasClass('active')? $(this).parents("ul").hide() : $(this).siblings().removeClass('active').end().addClass('active').parents("ul").hide().prev().val($(this).text())
});

$("#keyword").on('click',function() {
  $("#selecttype").val()=="1" ? $(this).attr("placeholder","请选择要分析的集群").next().show():$(this).attr("placeholder","请输入要分析的客户端IP").next().hide();
});

})

function lxjq(){

}


var setting = {
  check: {
    enable: true
  },
  data: {
    simpleData: {
      enable: true
    }
  }
};

var zNodes =[
{ id:1, pId:0, name:"DBPPOTAL", open:true},
{ id:11, pId:1, name:"T-USERINFO"},
{ id:12, pId:1, name:"T-LOG"},
{ id:13, pId:1, name:"T-LOGIN"},
{ id:14, pId:1, name:"T-IP-INFO"},

{ id:2, pId:0, name:"DB-WEBSITE"},
{ id:21, pId:2, name:"T-DB-NEW"},
{ id:22, pId:2, name:"T-DB-2016"},
{ id:23, pId:2, name:"T-DB-INFO2016-TEMP"},

{ id:3, pId:0, name:"DB-WASKL"},
{ id:31, pId:3, name:"T-SQMSL"},
{ id:32, pId:3, name:"T-SMQXH-JSK"},
{ id:33, pId:3, name:"T-BMSL-ZSJD"},

{ id:4, pId:0, name:"DB-ORACL-DJS"},
{ id:41, pId:4, name:"T-SKA"},
{ id:42, pId:4, name:"T-ZJSL2"},
{ id:43, pId:4, name:"T-Z,MWNZ"},
{ id:44, pId:4, name:"T-MBMSA"},
];


option1 =  {
  title : {
    text: '表访问量分布',
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a}<br> {b}: {c} ({d}%)",
  },
  series: [
  {
    name: '访问次数',
    type:'pie',
    radius: ['38%', '55%'],
    data:[
    {value:1435, name:'T-USERINFO'},
    {value:679, name:'T-DB-INFO2016-TEMP'},
    {value:348, name:'T-Z,MWNZ'},
    {value:348, name:'T-MBMSA'},
    {value:348, name:'T-SMQXH-JSK'},

    ]
  }
  ]
};
var myChart1 = echarts.init(document.getElementById('chart1'));
myChart1.setOption(option1, true);

option5 = {
  title: {
    text: '资源访问次数排名'
  },
  grid: {
    left: '30%',
  },
  yAxis: {
    data: ['172.23.221.119','172.23.221.210','222.161.234.123','192.168.1.55','178.231.26.204']
  },
  xAxis: {},
  series: [{
    name: '次数',
    type: 'bar',
    barWidth: 20,
    data: [292, 537, 1050,2843,3373]
  }]
};
var myChart5 = echarts.init(document.getElementById('chart5'));
myChart5.setOption(option5, true);

option2 = {
  title: {
    text: '操作类型分布'
  },
  tooltip: {
    trigger: 'item',
    formatter: " {b} {a}: {c} ({d}%)",
  },
  series: [
  {
   name: '次数',
   type:'pie',
   radius: ['38%', '55%'],
   data:[
   {value:1435, name:'查询'},
   {value:679, name:'写入'},
   {value:148, name:'修改'},
   {value:48, name:'删除'}
   ]
 }
 ]
};
var myChart2 = echarts.init(document.getElementById('chart2'));
myChart2.setOption(option2, true);

option3 = {
  title: {
    text: '常用工具分布'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a}<br> {b}: {c} ({d}%)",
  },
  series: [
  {
   name: '访问次数',
   type:'pie',
   radius: ['38%', '55%'],
   data:[
   {value:435, name:'PL-SQL'},
   {value:679, name:'MYSQL TOOLS'},
   {value:348, name:'SQL-Front'},
   {value:348, name:'HBASE TOOL'},
   {value:348, name:'SOLR-JSK'},

   ]
 }
 ]
};
var myChart3 = echarts.init(document.getElementById('chart3'));
myChart3.setOption(option3, true);

option4 = {
 title : {
  text: '每日流量规律',
  subtext: ''
},
tooltip : {
  trigger: 'item',
  formatter: "{b} {a} : {c}  "
},
grid: {
  left: '3%',
  right: '4%',
  bottom: '3%',
  containLabel: true
},
xAxis : [
{
  type : 'category',
  boundaryGap : false,
  data : ['0点','1点','2点','3点','4点','5点','6点','7点','8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点']
}
],
yAxis : [
{
  type : 'value'
}
],
series : [
{
  name:'访问次数',
  type:'line',
  smooth:true,
  data:[37,33,30,35,22,60,43,78,77,68,68,69,63,60,65,62,60,73,78,77,68,68,59,46]
}
]
};
var myChart4 = echarts.init(document.getElementById('chart4'));
myChart4.setOption(option4, true);

///////////////////page2////////////////////
// option15 = {
//   title: {
//     text: '资源排名'
//   },
//   grid: {
//     left: '20%',
//   },
//   yAxis: {
//     data: ['Hbase-1','Hbase-2','Oracle-1','官方门户','在线政务']
//   },
//   xAxis: {},
//   series: [{
//     name: '次数',
//     type: 'bar',
//     barWidth: 20,
//     data: [752,1592, 2437, 3350,4223]
//   }]
// };
// /*var myChart15 = echarts.init(document.getElementById('chart15'));
// myChart15.setOption(option15, true);*/

// option11 = {
//   title: {
//     text: '常用IP排名'
//   },
//   grid: {
//     left: '20%',
//   },
//   yAxis: {
//     data: ['172.23.221.119','172.23.221.210','222.161.234.123','192.168.1.55','178.231.26.204']
//   },
//   xAxis: {},
//   series: [{
//     name: '次数',
//     type: 'bar',
//     barWidth: 20,
//     data: [292, 537, 1050,2843,3373]
//   }]
// };
// /*var myChart11 = echarts.init(document.getElementById('chart11'));
// myChart11.setOption(option11, true);*/

// option12 = {
//   title: {
//     text: '常用数据库账户排名'
//   },
//   grid: {
//     left: '20%',
//   },
//   yAxis: {
//     data: ['zyx-0013779','lmy-0013778','zdj-0013770','root','ldz-0013001']
//   },
//   xAxis: {},
//   series: [{
//     name: '次数',
//     type: 'bar',
//     barWidth: 20,
//     data: [1092, 1237, 1850,2678,3502]
//   }]
// };
// /*var myChart12 = echarts.init(document.getElementById('chart12'));
// myChart12.setOption(option12, true);*/

// option13 = {
//   title: {
//     text: '常用工具排名'
//   },
//   grid: {
//     left: '20%',
//   },
//   yAxis: {
//     data: ['MapReduce','Hivemall','Ambari','PL/SQL','Hadoop']
//   },
//   xAxis: {},
//   series: [{
//     name: '次数',
//     type: 'bar',
//     barWidth: 20,
//     data: [892, 1137, 2850,3694,4522]
//   }]
// };
// /*var myChart13 = echarts.init(document.getElementById('chart13'));
// myChart13.setOption(option13, true);*/

// option14 = {
//  title : {
//   text: '时间点数据趋势',
//   subtext: ''
// },
// tooltip : {
//   trigger: 'axis'
// },
// legend: {
//   data:['读取','写入']
// },
// grid: {
//   left: '3%',
//   right: '4%',
//   bottom: '3%',
//   containLabel: true
// },
// xAxis : [
// {
//   type : 'category',
//   boundaryGap : false,
//   data : ['1点','2点','3点','4点','5点','6点','7点','8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点','0点']
// }
// ],
// yAxis : [
// {
//   type : 'value'
// }
// ],
// series : [
// {
//   name:'读取',
//   type:'line',
//   smooth:true,
//   data:[37,33,30,35,22,60,43,78,77,68,68,69,63,60,65,62,60,73,78,77,68,68,59,46]
// },
// {
//   name:'写入',
//   type:'line',
//   smooth:true,
//   data:[21,29,20,20,33,43,33,54,60,50,52,52,51,69,70,80,83,73,63,64,60,50,42,42 ]
// }
// ]
// };
// /*var myChart14 = echarts.init(document.getElementById('chart14'));
// myChart14.setOption(option14, true);*/

function showCharts(id){
  if(id==0){
    var myChart1 = echarts.init(document.getElementById('chart1'));
    myChart1.setOption(option1, true);

    var myChart2 = echarts.init(document.getElementById('chart2'));
    myChart2.setOption(option2, true);

    var myChart3 = echarts.init(document.getElementById('chart3'));
    myChart3.setOption(option3, true);

    var myChart4 = echarts.init(document.getElementById('chart4'));
    myChart4.setOption(option4, true);

    var myChart5 = echarts.init(document.getElementById('chart5'));
    myChart5.setOption(option5, true);

  }else{
    var myChart11 = echarts.init(document.getElementById('chart11'));
    myChart11.setOption(option11, true);

    var myChart12 = echarts.init(document.getElementById('chart12'));
    myChart12.setOption(option12, true);

    var myChart13 = echarts.init(document.getElementById('chart13'));
    myChart13.setOption(option13, true);

    var myChart14 = echarts.init(document.getElementById('chart14'));
    myChart14.setOption(option14, true);

    var myChart15 = echarts.init(document.getElementById('chart15'));
    myChart15.setOption(option15, true);
  }

}
</script>